<template>
	<div class="b-grid b-wrap">
		<div class="cardList">
			<StoreyTitle :title="list" />
			<div class="cardListItem">
				<CardCommon
					v-for="cItem in categoryList"
					:key="cItem.vid"
					:cardCommon="cItem"
				/>
			</div>
		</div>
		<div class="rank-conent" v-if="categoryRankList.length">
			<div class="conent-title">
				<div class="title-info">排行榜</div>
				<div class="rank-more">
					<span>更多</span>
					<i class="iconfont icon-xiangyou1"></i>
				</div>
			</div>
			<ul class="rank-list-video" @click="toDetail">
				<li
					class="rank-list-video_item"
					v-for="(rank, index) in categoryRank"
					:key="rank.uid"
				>
					<div
						class="rank-list-video_item-wrap"
						@mouseenter="handleShow(index)"
						@mouseleave="isShow = -1"
					>
						<span class="rank-index">{{ index + 1 }}</span>
						<a href="javascript:;" class="rank-video-card">
							<div class="rank-video-card_info">
								<h3
									class="rank-video-card_info-tit"
									:data-vid="rank.vid"
									:data-uid="rank.uid"
								>
									{{ rank.vTitle }}
								</h3>
							</div>
						</a>
					</div>
					<div class="rank-tip" v-show="index === isShow">
						<div class="rank-tip_title">
							<img class="rank-tip_titleImg" :src="rank.coverPic" alt="" />
							<div class="rank-tip_title-info">
								<h3 class="rank-tip_title-infoHeader">
									{{ rank.vTitle }}
								</h3>
								<div class="rank-tip_title-upInfo">
									<span class="rank-tip_title-upName">{{ rank.uname }}</span>
									<span class="rank-tip_title-time">{{ rank.upTime }}</span>
								</div>
							</div>
						</div>
						<div class="rank-top_bottom">
							<div class="rank-top_bottom-item">
								<i class="iconfont icon-24gl-playSquare"></i>
								<span>{{ rank.vLike }}</span>
							</div>
							<div class="rank-top_bottom-item">
								<i class="iconfont icon-24gl-playSquare"></i>
								<span>{{ rank.vPlay }}</span>
							</div>
							<div class="rank-top_bottom-item">
								<i class="iconfont icon-24gl-playSquare"></i>
								<span>{{ rank.comments }}</span>
							</div>
							<div class="rank-top_bottom-item">
								<i class="iconfont icon-24gl-playSquare"></i>
								<span>{{ rank.vStar }}</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import CardCommon from "../cardCommon";
import StoreyTitle from "../StoreyTitle";

import { mapState, mapGetters } from "vuex";
export default {
	// 一行列表组件
	name: "ListCard",
	props: {
		list: {
			type: String,
			require: true,
		},
	},
	data() {
		return {
			// categoryList: [],
			isShow: -1,
		};
	},
	computed: {
		...mapState("index", ["videoList"]),
		...mapGetters("index", ["categoryRankList"]),
		categoryList() {
			return this.videoList
				.filter((item) => {
					return item.vType === this.list;
				})
				.slice(0, 8);
		},
		categoryRank() {
			return this.videoList
				.filter((item) => {
					return item.vType === this.list;
				})
				.slice(0, 8);
		},
	},
	methods: {
		handleShow(index) {
			this.isShow = index;
		},
		toDetail(e) {
			// if (e.target.nodeName !== "LI") return;
			const { vid, uid } = e.target.dataset;
			console.log("vid", vid, "uid", uid);
			if (!vid) return;
			this.$router.push({
				name: "Detail",
				query: {
					vid,
					uid,
				},
			});
		},
	},
	mounted() {
		// console.log(this.list);
	},
	components: {
		CardCommon,
		StoreyTitle,
	},
};
</script>

<style lang="less" scoped>
.b-wrap {
	width: 1289px;
	// height: 526px;
	margin: 0 auto;
	box-sizing: border-box;
}
.b-grid {
	display: flex;
	justify-content: space-between;
	// height: 470px;
	padding-bottom: 40px;
	.rank-conent {
		width: 270px;
		// border: 1px solid red;
		margin-right: 15px;
		box-sizing: border-box;

		.conent-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
			margin-bottom: 16px;
			height: 32px;
			.title-info {
				font-size: 22px;
				cursor: pointer;
				&:hover {
					color: #00aeec;
				}
			}
			.rank-more {
				border: 1px solid silver;
				padding: 2px 7px;
				border-radius: 3px;
				cursor: pointer;
				&:hover {
					background-color: #eee;
					color: #00aeec;
				}
				.icon-xiangyou1 {
					font-size: 12px;
				}
			}
		}
		.rank-list-video {
			height: 468px;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			border: 1px solid #f1f2f3;
			// overflow: hidden;
			border-radius: 5px;
			box-sizing: border-box;
			.rank-list-video_item {
				position: relative;
				padding: 0 8px;
				// &:hover .rank-tip {
				// 	display: block;
				// }

				.rank-list-video_item-wrap {
					height: 57px;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					// height: 100%;
					.rank-index {
						margin-right: 6px;
						width: 20px;
						font-style: italic;
						font-weight: 500;
					}
					.rank-video-card {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						align-items: stretch;
						min-width: 0;
						flex: 1;
						// padding: 15px 0;
						line-height: 57px;
						color: #18191b;
						transition: color 0.5s;
						// font-weight: 800;
						&:hover {
							text-decoration: none;
							color: #00aeec;
						}
						.rank-video-card_info {
							display: flex;
							align-items: center;
							height: 100%;
						}
					}
					.rank-video-card .rank-video-card_info-tit {
						width: 220px;
						height: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 13px;
						font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue,
							Microsoft YaHei, sans-serif;
						font-weight: 600;
					}
				}
				.rank-tip {
					position: absolute;
					top: -110px;
					left: 50%;
					transform: translateX(-50%);
					width: 330px;
					height: 110px;
					// border: 1px solid red;
					// display: none;
					z-index: 10;
					border-radius: 10px;
					background-color: rgb(243, 243, 243);
					.rank-tip_title {
						display: flex;
						// justify-content: space-between;
						padding: 10px;
						.rank-tip_titleImg {
							width: 90px;
							height: 50px;
							margin-right: 10px;
							border-radius: 5px;
						}
						.rank-tip_title-info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}
						.rank-tip_title-upInfo {
							.rank-tip_title-upName {
								padding-right: 5px;
							}
						}
					}
					.rank-top_bottom {
						display: flex;
						justify-content: space-around;
						.rank-top_bottom-item {
							span {
								padding-left: 5px;
							}
						}
					}
				}
			}
		}
		.rank-list-video_item:nth-of-type(2n) {
			background-color: #f6f7f8;
		}
	}
	.cardList {
		// border: 1px solid blue;
		// width: 1000px;

		.cardListItem {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
}
</style>
